Me preguntaban si es posible fijar la sidebar al igual que hacemos con el fondo estático, y la respuesta es si.
El ejemplo que me han mandado es el blog de Joshua Peterson uno de los diseñadores de las nuevas plantillas de Blogger,y como puede verse el header o cabecera del blog ocupa la parte superior de las entradas de forma que la sidebar queda a la misma altura.
Como no se trata de modificar nuestra plantilla sino de dejarla tal y como está pero fijando la sidebar lo que haremos será añadir la propiedad fixed que posiciona un elemento de forma flotante.
Si hacemos un poco de memoria recordaremos haber añadido esa propiedad en alguna ocasión por ejemplo en la imagen de subir y bajar con efecto deslizante o añadiendo la imagen fija para Twiter
Para fijar la sidebar tendremos en cuenta que el contenido no debe ocupar demasiado espacio porque de lo contrario quedaría oculto sin posibilidad de poder mostrarlo. Por eso las páginas solemos ver con esta opción son de tipo portafolio cuyo contenido es escaso.
Buscamos sidebar-wrapper y añadimos lo marcado en negrita:
#sidebar-wrapper {
margin-top:-5px;
margin-left: 640px;
position:fixed;
width: 220px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Con margin-top decidimos a qué altura situaremos la sidebar para que el contenido sea visible en su totalidad.
Con margin-left haremos lo mismo pero esta vez dejando más o menos espacio a la izquierda de la sidebar de forma que no llegue a ocupar el espacio de las entradas.
Buenos dias
Me encanta mucho esta idea, el problema es que no encuentro la linea de #sidebar-wrapper
Me interesaria dejar el apartado de Indice Alfabetico fijo, lo puedo hacer?
http://www.ballslinedance.blogspot.com/
Muchas gracias
Eva
Sabes que no puedo verla en el blog de Joshua Peterson, pero sí en tu ejemplo.
Besos!
Hola Gem@, muy bueno este truco para la gente que quiere poner algo Fijo, quisiera preguntarte algo, como has hecho para poner asi tus post, que el primero se muestre totalmente y los siguiente esten como extraidos, asi como las etiquetas, te agradeceria muchisimo!!
Gracias y excelente Blog!!
:: ev@linedancer en tu plantilla creo que esa parte de la sidebar está como "content-outer" puedes probar ahí o si lo que deseas es dejar fija esa parte que corresponde a las etiquetas bastaría con añadir algo así:
#Label1 {
margin-top:25px;
position:fixed;
}
:: Graciela y la veo bien en los dos sitios :S
:: Jhony Page son dos cosas distintas, para expandir y contraer gadget de la sidebar como yo lo tengo puedes guiarte de la siguiente entrada:
http://gemablog-.blogspot.com/2009/10/efecto-toggle-en-los-gadgets-de-la.html
El sistema de entradas no lo tengo explicado pero la idea y una muy buena explicación puedes verla en el blog de Vagabundia, no he podido localizar la entrada porque parece que hay problemas en el buscador pero añadiendo la palabra resumidos se localizan las dos entradas que formar el tutorial :)
:D Hola Gemita, tu y yo hemos estado pensando en lo mismo ultimamente, sabes que el otro día, precisamente estuve pensando en una plantilla con la columna lateral en posición fija, aparentemente sencillo pero un poco latoso (considerando que hay que hacer cosas extras) cuando hay que pensar en todos los navegadores bueno en IE6,...también creo que hay que tener en cuenta que el diseño se adapte a dicha característica, para que luzca interesante y útil, no lo crees?
En la página de Petterson la columna lateral se vá completamente a la derecha en IE7, mientras que en Ie6 se vá hacia abajo, no en IE8 que funciona correctamente, tal vez por eso Graciela no la vio, que nos cuente con que navegador la esta viendo...
Hay algunos hacks que he visto para posicionar elementos fijos y que funciona bien en todos los navegadores, que bueno, en realidad quien da la verdadera lata es IE6, que vaya, que además de obsoleto y malo, longevo jaja... tal vez por eso google lo odia tanto que ya no le importa si se ve bien o no los diseños de las plantillas en este.
Bueno aquí se pueden ver los hacks para lograrlo:
http://ryanfait.com/position-fixed-ie6/
http://www.cssblog.es/css-position-fixed-para-ie6/
El primero lo puedes ver funcionando.
:) Bueno, me retiro que me llaman... abrassos y bessos para ti.
:: Gracias por el aporte Karla, parto de la idea que es recomendable actualizar los navegadores, diría que más que recomendable es necesario porque no se puede pretender que versiones antiguas tengan las mismas funciones que las actualizadas.
Creo que para no luchar con este problema lo mejor es concienciar a todo el mundo que actualice porque van a seguir ganando independientemente del navegador que estén usando.
Muchas gracias Gem@, ahora si que me funciona
Con IE8 Karla, sigo sin poder verlo :S
:D Uiaaaa!!!!! Que buen truco!!! Lo probare;)
Gracias!
Besos!!!
WOOOOOOOOOOOOOOW :O me quedé asombrado jeje
Mil gracias GEM@ por tus ayudas, y por cierto, tengo unas preguntitas (3 jeje) empiezo:
1. Disculpa mi ignorancia pero ¿que significa "Lorem Ipsum" y el texto que ponen siempre ahí?
2. El buscador que tengo en el blog no sirve, puse el de google y tampoco encuentra nada, solo tengo el de la barra de wibiya y no me funciona, no encuentra nada. ¿Tienes el código de alguno?
3. Hay un código que no me funciona correctamente, en mi blog tengo el siguiente código. Cuando acerco el ratón si cambia de imágen pero no es posible enlazar el vínculo como debería.
Gracias de antemano por tu tiempo y comprensión :D
Soy yo de nuevo :D disculpa, como le haces para poner el botón de "reply" en los comentarios? :D gracias
ESE COMENTARIO ES SPAM |O
Igualmente Gema, te doy toda la razon, de hecho en mi blog tengo instalado ya hace mucho tiempo un mensaje que solo es visible para usuarios con IE6 que recomienda probar otros navegadores como IE8, Firefox, safari o chrome.
En America Latina su uso esta mas arraigado que en otros paises,...bueno es algo complejo, mejor cambiamos de tema ahh!
Oye y que curioso que Graciela no pueda ver la sidebar fija en el blog de Peterson con IE8, yo si la veo bien en ese navegador, -que raro Graciela, :-|
Bueno, estoy buscando el efecto de ampliar imagenes en los post, que sea compatible con el script de resumen de imagenes, y que el script pueda ser ingresado al codigo de la plantilla.
:)Gracias Gemita
:: Estupendo ev@linedancer :)
:: Graciela pensaba que hablabas de Firefox, y no, yo tampoco lo veo con IE8 :s
:: MamaNunes holaaaaaaaaaa gracias por comentar!! :D
:: N.G. - C.W.
1: Es un texto que se usa de relleno, no tiene sentido alguno y la finalidad es que el texto no llame la atención, y por el contrario si la llame el tema o ejemplo que se está tratando.
2: Qué tal este: http://gemablog-.blogspot.com/2006/12/buscador-interno.html
3: Dime a qué imagen te refieres enconcreto o la entrada donde la tienes y lo más importante de qué blogs estamos hablando??
4: Las explicaciones del reply en Vagabundia ;)
http://vagabundia.blogspot.com/2010/06/agregar-reply-los-comentarios.html
Si, era spam :(
:: Yo tampoco lo veo Karla :S
Ampliar imágenes? con ventana modal o css?
Yo utilizo Lytebox :)
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
En el comentario te dejé el link donde está el código pero te lo dejo de nuevo :D http://tinypaste.com/28ca31 GRACIAS por tu ayuda
Hola Gema,mmm, raro lo de el rollo de la columna, se jue jaja; si, busco el efecto de zoom con ventana modal, ya eche un vistazo a lo que me recomendaste, te cuento si tengo dudillas...
Hasta luego gemita y muchas Gracias por todo :)
:: N.G. - C.W. pues no daba con el error tuve que recurrir a grandes maestros :)
<a style='display:scroll;position:fixed;bottom:23px;left:13px;' href='http://www.win07noticias.com/p/suscribete-win07noticias.html' title='suscribete'>
<img src='http://i33.tinypic.com/msd5s9.jpg' onmouseover='this.src="http://i50.tinypic.com/2s5zhn9.jpg"' onmouseout='this.src="http://i33.tinypic.com/msd5s9.jpg"' />
</a>
:: Suerte Karla :)
No sabía que podíaponer código en los comentarios :D MIL GRACIAS!!!!!!!
Me dejaste con la boca abierta :O FUNCIONAAA :D
La verdad no se como agradecerte, ¿qué puedo hacer por tí?
:: Pues entre otras cosas puedes divertirte, reír, abrazar a la gente que quieres, pasarlo bien y disfrutar de la vida por ejemplo :D
Muchas gracias GEM@ he aprendido mucho de tí y contigo, deveras te agradezco esta amistad :D y espero que desde donde estés puedas recibir mis fuertes abrazos por las ayudas que me proporcionas ;) una pregunta, eres de España verdad? yo soy de México :D
:: Así es N.G. - C.W. soy de España de una provincia que se llama Murcia, en concreto de Cartagena pegadito al mar Mediterráneo :D
Que bien jeje :D yo soy de México, especificando más de Cd. Juárez, talvez lo hayas oído en las noticias, la inseguridad aquí está muy mal :(
:: Si que lo he oído, ojalá mejore todo y puedas contar algo más tranquilizador.
Pues si, esperemos termine pronto :D yo mientras tanto pueda seguiré :D (en mi blog)
Hola GEM@ soy yo de nuevo, estaba pensando en si había la posibilidad de modificar una pequeña cosa en el código que me hiciste el favor de arreglarlo, ¿se puede que hacer clic en el enlace aparezca en una ventana emergente?
:: Es un código muy elaborado y no sabría responderte a eso sin saber que clase de ventana emergente :S
No te preocupes, solo era curiosidad :D Gracias
Gracias Gem@ lo buscare en el blod de Vgabundia!!
:: Jhony Page ahora si funciona el buscador :
http://vagabundia.blogspot.com/2010/06/agregar-reply-los-comentarios.html
Hola Gema,he intenado poner el sidebar fijo pero el código que muestras no aparace.He probado con la otra opción "content-outer" pero tampoco.
¿Cómo lo puedo solucionar?
http://manu-gallardo.blogspot.com/
Un saludo
:: No sabría decirte Manu, es la primera vez que veo una plantilla como la tuya y aunque la sidebar debe estar definida con algún nombre no localizo el que es :S
Anda pero si eres de Murcia!!!
Muchas gracias Gema. Voy a seguir investigando pq me interesa dejar las columnas fijas.La plantilla es una de las que salen por defecto en blogger solo que le he quitado la cabecera y poco más.
Estamos en contacto.
Un saludo.
Manu
I love you!Meu amor!Tenes qui colocar una tarjeta de pre-pal para que possamos colaborar com tu trabajo Gem@.
Tu es maravilhosa!
:: Manu Gallardo las nuevas plantillas me desconciertan :S pero bueno, todo es intentarlo ;)
:: Es buena idea Taillard :D
Hola Gema, al hilo de este post quería comentarte una duda que tengo. Llevo ya muchos años gestionando un blog donde muestro mi portfolio de trabajos, modificando una plantilla standard de blogger. Ahora he pensado en darle una aire más cool al estilo de esta http://www.drewsisk.com/. He estado trabajando el tema de las sidebars estáticas y me preguntaba dos cuestiones.
1. El sentido de avance de un post en un blog siempre es vertical. Me preguntaba si es posible invertir el sentido de avance y hacerlo en horizontal con la barra de navegación deslizable abajo, al estilo de la web drewsisk.
2. Se puede incorporar una barra de navegación deslizante en la sidebar, al igual que ocurre en esta web?
saludos y gracias de antemano
:: Miguel Ángel son dos cosas distintas las que se plantean, a la sidebar y a cualquier parte del blog le podemos añadir una barra de scroll:
http://gemablog-.blogspot.com/2008/04/scrollbar-en-el-blog.html
Otra cosa distinta es la forma de mostrar las entradas, la única forma que he visto hasta ahora de poder hacer eso es con jQuery y Coda Slider.
En xyberneticos hay un tutorial:
http://xyberneticos.com/index.php/2008/09/21/contenido-deslizante-con-auto-reproduccion/
Y otro ejemplo de página donde lo vi aplicado es en:
http://spanglish-mx.blogspot.com/#1
(los enlaces inferiores de « Anterior | Siguiente » ayudan a la navegación ;)
Hola Gema, mi primer problema es que no encuentro sidebar-wrapper, pero si encuentro content-outer como le dijiste a otra persona, pero de igual manera no me funciona, todo el contenido de mi blog se va al lado izquierdo de la pantalla, quedando visible menos de la mitad, y además las entradas también quedan fijas. Será por que mi blog es de dos columnas laterales? Espero que puedas ayudarme,de antemano muchas gracias :)
Quiero dejar una columna fija (cuyo contenido es sólo una imagen) del lado izquierdo de la página, y no puedo, la plantilla está configurada con la sidebar en la izquierda y al añadir el código se cambia de lugar y queda por encima del texto. Donde dice right lo he cambiado por left y aún así la imagen sigue quedando en el mismo lugar. ¿Podrías ayudarme? Espero que se haya entendido. Muchas gracias desde ya... :)
HOLA GEMA, yo tambien tengo el mismo problema de unknown y emilia, la sidebar si queda fija pero siempre queda colocada a la izq y queda encima de todo mi contenido, crees que puedas ayudarnos?? gracias!
mi blog donde tengo el problema es
http://pruebasnextel.blogspot.com/
:: Nextel en tu caso es que no le das espacio a la izquierda, fíjate que digo que se añadan las líneas en negrita y una de ellas es margin-left (márgenes a la izquierda)
Sería suficiente si pones por ejemplo:
#sidebar-wrapper {
background-color: #F1F1F1;
float: right;
margin-left: 640px;
margin-top: 30px;
overflow: hidden;
position: fixed;
width: 300px;
word-wrap: break-word;
}
:: Emilia ¿me dices de qué blog estamos hablando?
@Gem@
MUCHAS GRACIAS!!!!!!!
:: Ya veo que funcionó :D
Hola Gemma, verás mi blog es éste: http://angelabouvier.blogspot.com ¡Y no encuentro la manera de que se quede fija!
Cuando lo he conseguido se me ponía encima del texto a la izquierda, y yo lo quiero a la derecha. Tal cual está.
Espero que lo leas. ¿Me podrías responder mejor en angelabouvierblo@hotmail.com?
Gracias de antemano. Un beso grande.
Es muy probable que tengas que añadir un margen mayor a la izquierda (margin-left) vas mirando en vista previa hasta dar con la medida indicada.
Kaixo Gema en mi caso al ser un plantilla del diseñador de blogger y tener dos sidebar, una a la izquierda y otra a la derecha, para dejar fija le de la derecha tube que buscar el siguiente codigo:
.main-inner .column-left-outer
estando asi el codigo completo:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right:100;
margin-left: -$(main.column.left.width);
background: #110000 url(http://www.blogblog.com/1kt/watermark/body_background_navigator.png) repeat scroll top left;
}
para que la sidebar se quedase fija tube que quitar right:100% y poner position: fixed quedando el codigo asi:
.main-inner .column-left-outer {
width: $(main.column.left.width);
margin-left: -$(main.column.left.width);
background: #110000 url(http://www.blogblog.com/1kt/watermark/body_background_navigator.png) repeat scroll top left; position:fixed;
}
y para que la sidebar si ajustase a la pantalla completa le añadi top: 0 y bottom: 0 quedando asi:
.main-inner .column-left-outer {
width: $(main.column.left.width);
margin-left: -$(main.column.left.width);
background: #110000 url(http://www.blogblog.com/1kt/watermark/body_background_navigator.png) repeat scroll top left; position:fixed;
bottom:0;
top:0;
}
Genial Amets, te admiro por atreverte a utilizar ese tipo de plantilla :)
Hola Gema!, seguí la respuesta de Amets pero la sidebar me queda montada sobre el contenido del blog... que podría hacer?.
muchas gracias
¡Hola!
No consigo encontrar la manera de hacerlo en mi blog...de hecho en la plantilla no encuentro el "sidebar-wrapper"...me gustaría saber si es posible hacerlo de otra manera.
¡Gracias!
www.danielestevemanya.blogspot.com
Nota: solo los miembros de este blog pueden publicar comentarios.